<template>
<div>
  <div class="bid-steps" :class="'bid-steps'+step">
    <div class="step step1" :class="{'active':step==1}">
        <a @click="goStep(1)">创建询价</a>
    </div>
    <div class="step step2" :class="{'active':step==2}">
        <a @click="goStep(2)">报价</a>
    </div>
    <div class="step step3" :class="{'active':step==3}">
        <a @click="goStep(3)">比价</a>
    </div>
    <div class="step step4" :class="{'active':step==4}">
        <a @click="goStep(4)">价格审批</a>
    </div>
    <div class="step step5" :class="{'active':step==5}">
      <a @click="goStep(5)">比价结束</a>
    </div>
    <div class="step step6" :class="{'active':step==6}">
    <a @click="goStep(6)">异常终止</a>
  </div>

  </div>
    <div class="step-main">
        <component v-bind:is="componentname" :data="paramsData" :stepData="stepData" @initList="getList" style="padding:20px;background:#fff;" :readonly="true"></component>
    </div>
</div>
</template>
<script>
/**
 * loadUserPage(url,params)，第一个参数为页面路径，第二个为子页面需要的参数，可在子页面用this.$attrs.data获取
 * default-active 为默认展开的菜单，el-menu-item标签上的index为跳转的页面路径
 * 点击菜单会自动执行select方法，可在方法里传参
 *
*/
  export default {
    data() {
      return {
        step:0,
        componentname:'',
        paramsData:{},
        isCollapse: false,
        stepData:{}
      };
    },
    created(){
        console.log(this.$route.query.id);
      this.paramsData={id:this.$route.query.id};
      this.getList();
    },
    methods: {
      getList(){
        //基本信息
        this.axios.post(this.lib.config.host.rfq + '/ctmgt/rfq/enquiry/rfqEnquiry/' + this.$route.query.id).then((res) => {
            this.stepData.rfqMain = res.data;
            this.goStep(this.$route.query.step);
        })
        .catch(function (error) {
            console.log(error);
        });

        //物料信息
        this.axios.post(this.lib.config.host.rfq + '/ctmgt/rfq/enquiry/queryMaterialPage/' + this.$route.query.id, {"pageNo:":1, "pageSize:": 100}).then((res) => {
            this.stepData.rfqItems = res.data;
        })
        .catch(function (error) {
            console.log(error);
        });

        //供应商信息
        this.axios.post(this.lib.config.host.rfq + '/ctmgt/rfq/enquiry/queryVendors/' + this.$route.query.id).then((res) => {
            this.stepData.rfqVendors = res.data;
        })
        .catch(function (error) {
            console.log(error);
        });
      },
      loadUserPage(name,id){
        import(`${name}.vue`).then((FBshare)=>{
          this.componentname=FBshare.default;
        })
      },
      goStep(step){
          if(step===this.step)return;
          this.loadUserPage(`./step${step}`);
          this.step=step;
      }
    }
  }

</script>

<style scoped>
.bid-steps{
    width:100%;
    height:50px;
    line-height: 50px;
    overflow: hidden;
    background: #f5f7fa;
    box-shadow: 5px 5px 5px #da1f243d;
}
.bid-steps2 .step1 a{
    color:#c0c4cc;
}
.bid-steps3 .step1 a,.bid-steps3 .step2 a{
    color:#c0c4cc;
}
.bid-steps4 .step1 a,.bid-steps4 .step2 a,.bid-steps4 .step3 a{
    color:#c0c4cc;
}
.bid-steps5 .step1 a,.bid-steps5 .step2 a,.bid-steps5 .step3 a,.bid-steps5 .step4 a{
    color:#c0c4cc;
}
.bid-steps .step{
    float: left;
    text-align: center;
    width: 16%;
    font-size: 18px;
    position: relative;
}
.bid-steps .step{
    float: left;
    text-align: center;
    width: 16%;
    font-size: 18px;
    position: relative;
}
.bid-steps .step:after{
    content: '';
    position: absolute;
    display: inline-block;
    width: 35px;
    height: 35px;
    border-top: 1px solid #c0c4cc;
    border-right: 1px solid #c0c4cc;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    right: 5px;
    top: 7px;
}
.bid-steps2 .step1:after{
    border-color:#e6e6e6;
}
.bid-steps3 .step1:after,.bid-steps3 .step2:after{
    border-color:#e6e6e6;
}
.bid-steps4 .step1:after,.bid-steps4 .step2:after,.bid-steps4 .step3:after{
    border-color:#e6e6e6;
}
.bid-steps5 .step1:after,.bid-steps5 .step2:after,.bid-steps5 .step3:after,.bid-steps5 .step4:after{
    border-color:#e6e6e6;
}
.bid-steps .step:last-child:after{
    display: none;
}
.step a{
    cursor: pointer;
}
a:hover{
    color:#DA1F24
}
.bid-steps .active.step:after{
    border-color:#DA1F24;
}
.bid-steps .active.step:before{
    content: '';
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 2px;
    background: #DA1F24;
    left: 50%;
    bottom: 0px;
    margin-left: -30px;
}
.active a{
    color:#DA1F24
}
</style>
